<template>
  <view class="auth-page">
    <!-- 顶部栏 -->
    <view class="header">
      <text class="back" @click="onBack">&#60;</text>
      <text class="title">医生认证</text>
    </view>

    <!-- 医院选择 -->
    <view class="form-group">
      <text class="label bold">医院选择</text>
      <picker :range="hospitalList" @change="onHospitalChange">
        <view class="input-row picker-row">
          <text class="input-text">{{ selectedHospital || '请选择医院' }}</text>
          <text class="icon">&#10003;</text>
        </view>
      </picker>
    </view>

    <!-- 科室选择 -->
    <view class="form-group">
      <text class="label bold">科室选择</text>
      <picker :range="departmentList" @change="onDepartmentChange">
        <view class="input-row picker-row">
          <text class="input-text">{{ selectedDepartment || '请选择科室' }}</text>
          <text class="icon">&#10003;</text>
        </view>
      </picker>
    </view>

    <!-- 职称级别 -->
    <view class="form-group">
      <text class="label bold">职称级别</text>
      <picker :range="titleList" @change="onTitleChange">
        <view class="input-row picker-row">
          <text class="input-text">{{ selectedTitle || '请选择职称' }}</text>
          <text class="icon">&#10003;</text>
        </view>
      </picker>
    </view>

    <!-- 擅长领域 -->
    <view class="form-group">
      <text class="label bold">擅长领域</text>
      <textarea
        class="textarea"
        placeholder="请输入您擅长的领域"
        v-model="goodAt"
      />
    </view>

    <!-- 姓名 -->
    <view class="form-group">
      <text class="label bold">姓名</text>
      <input
        class="input"
        placeholder="请输入姓名"
        v-model="name"
        maxlength="20"
      />
    </view>

    <!-- 居民身份证 -->
    <view class="form-group">
      <text class="label bold">居民身份证</text>
      <input
        class="input"
        placeholder="请输入身份证号"
        v-model="idCard"
        maxlength="18"
      />
    </view>

    <!-- 申请认证按钮 -->
    <view class="btn-wrap">
      <button class="submit-btn" @click="onSubmit">申请认证</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const hospitalList = ['北京协和医院', '上海瑞金医院', '广州中山医院']
const departmentList = ['内科', '外科', '儿科', '骨科']
const titleList = ['主任医师', '副主任医师', '主治医师', '医师']

const selectedHospital = ref('')
const selectedDepartment = ref('')
const selectedTitle = ref('')
const goodAt = ref('')
const name = ref('')
const idCard = ref('')

const onBack = () => {
  uni.navigateBack()
}
const onHospitalChange = (e: any) => {
  selectedHospital.value = hospitalList[e.detail.value]
}
const onDepartmentChange = (e: any) => {
  selectedDepartment.value = departmentList[e.detail.value]
}
const onTitleChange = (e: any) => {
  selectedTitle.value = titleList[e.detail.value]
}

const onSubmit = () => {
  if (!selectedHospital.value) {
    uni.showToast({ title: '请选择医院', icon: 'none' })
    return
  }
  if (!selectedDepartment.value) {
    uni.showToast({ title: '请选择科室', icon: 'none' })
    return
  }
  if (!selectedTitle.value) {
    uni.showToast({ title: '请选择职称', icon: 'none' })
    return
  }
  if (!goodAt.value.trim()) {
    uni.showToast({ title: '请输入擅长领域', icon: 'none' })
    return
  }
  if (!name.value.trim()) {
    uni.showToast({ title: '请输入姓名', icon: 'none' })
    return
  }
  if (!idCard.value.trim()) {
    uni.showToast({ title: '请输入身份证号', icon: 'none' })
    return
  }
  // 校验通过，跳转到 profile 页面
  uni.navigateTo({ url: '/pages/profile/profile' })
}
</script>

<style scoped>
.auth-page {
  background: #fff;
  min-height: 100vh;
  padding: 0 0 40rpx 0;
}
.header {
  display: flex;
  align-items: center;
  height: 100rpx;
  background: #fff;
  box-shadow: 0 8rpx 24rpx rgba(25, 195, 60, 0.08);
  padding: 0 32rpx;
  position: relative;
}
.back {
  font-size: 48rpx;
  color: #19c37c;
  font-weight: bold;
  margin-right: 24rpx;
  cursor: pointer;
}
.title {
  font-size: 36rpx;
  color: #19c37c;
  font-weight: bold;
}
.form-group {
  margin: 0 32rpx 0 32rpx;
  border-bottom: 2rpx solid #19c37c;
  padding: 32rpx 0 0 0;
}
.label {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
}
.input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8rpx 0 16rpx 0;
}
.input-text {
  font-size: 28rpx;
  color: #888;
}
.icon {
  font-size: 40rpx;
  color: #19c37c;
}
.textarea {
  width: 100%;
  min-height: 80rpx;
  border: 2rpx solid #19c37c;
  border-radius: 16rpx;
  padding: 20rpx;
  font-size: 28rpx;
  margin: 16rpx 0 0 0;
  color: #666;
  background: #fff;
  box-sizing: border-box;
}
.input {
  width: 100%;
  border: none;
  background: none;
  font-size: 28rpx;
  color: #333;
  margin: 8rpx 0 0 0;
}
.btn-wrap {
  margin: 64rpx 32rpx 0 32rpx;
}
.submit-btn {
  width: 100%;
  height: 88rpx;
  background: #19c37c;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(25, 195, 60, 0.18);
  border: none;
}
.picker-row {
  cursor: pointer;
}
</style> 